<html>
<head> 
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
    <script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>
    <title>流量计选型工具</title> 

<script>
	function toRound(value){
		var value2;
		if (value > 1000){
			value2 = value.toFixed(0);
		}
		else if (value > 100){
			value2 = value.toFixed(1);
		}
		else if (value > 10){
			value2 = value.toFixed(2);
		}
		else if (value > 1){
			value2 = value.toFixed(3);
		}
		else{
			value2 = value.toFixed(4);
		}
		return value2
	}

	function getQueryString(name) {
	    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
	    var r = window.location.search.substr(1).match(reg);
	    if (r != null) {
	        return unescape(r[2]);
	    }
	    return null;
	}

	const PARA = {
		'Fluid': {
			'water': {'name_c': '水', 'name_e': 'Water(H2O)'},
			'raw_sewage': {'name_c': '未净化污水', 'name_e': 'Raw sewage'},
			'sulfuric_acid_10': {'name_c': '硫酸10%', 'name_e': 'Sulfuric acid 10%'},
		},
		'Size': {
			'10': {'name': 'DN10', },
			'15': {'name': 'DN15(1/2 inch)', },
			'20': {'name': 'DN20', },
			'25': {'name': 'DN25(1 inch)', },
			'32': {'name': 'DN32', },
			'40': {'name': 'DN40(1 1/2 inch)', },
			'50': {'name': 'DN50(2 inch)', },
			'65': {'name': 'DN65', },
			'80': {'name': 'DN80', },
			'100': {'name': 'DN100', },
			'125': {'name': 'DN125', },
			'150': {'name': 'DN150', },
			'200': {'name': 'DN200', },
			'250': {'name': 'DN250', },
			'300': {'name': 'DN300', },
			'350': {'name': 'DN350', },
			'400': {'name': 'DN400', },
			'450': {'name': 'DN450', },
			'500': {'name': 'DN500', },
			'550': {'name': 'DN550', },
			'600': {'name': 'DN600', },
			'700': {'name': 'DN700', },
			'800': {'name': 'DN800', },
			'900': {'name': 'DN900', },
			'1000': {'name': 'DN1000', },
		},
		'TemperatureUnit': {
			't_c': {'name': '℃', },
			't_f': {'name': '°F', },
		},
		'PressureUnit': {
			'p_mpa': {'name': 'MPa', },
			'p_bar': {'name': 'bar', },
		},
	}

	const Electrode = {
		'K1': {'name_c': '316L', 'name_e': '316L', 'cost': 1}, 
		'K2': {'name_c': '哈氏合金C', 'name_e': 'HC', 'cost': 2}, 
		'K4': {'name_c': '钛', 'name_e': 'Ti', 'cost': 3}, 
		'K5': {'name_c': '钽', 'name_e': 'Ta', 'cost': 4}, 
		'K62': {'name_c': '铂铱头316杆', 'name_e': '316L-PtIr', 'cost': 6}, 
	}

	const ElectrodeCorrosion = {
		'water': {
			'K1': 'A', 'K2': 'A', 'K4': 'A', 'K5': 'A', 'K62': 'A',
		},
		'raw_sewage': {
			'K1': 'A', 'K2': 'A', 'K4': 'A', 'K5': 'A', 'K62': 'A',
		},
		'sulfuric_acid_10': {
			'K1': 'N', 'K2': 'A5', 'K4': 'N', 'K5': 'B1', 'K62': 'A1', 
		},
	}

	const Lining = {
		'F4': {'name_c': '聚四氟乙烯', 'name_e': 'PTFE', 'cost': 2}, 
		'F3': {'name_c': '特氟龙', 'name_e': 'PFA', 'cost': 4}, 
		'F6': {'name_c': '聚氨酯橡胶', 'name_e': 'PU', 'cost': 3}, 
		'F1': {'name_c': '氯丁橡胶', 'name_e': 'CR', 'cost': 1}, 
	}

	const LiningCorrosion = {
		'water': {
			'F4': 'A1', 'F3': 'A1', 'F6': '', 'F1': 'A4', 
		},
		'raw_sewage': {
			'F4': 'A1', 'F3': 'A1', 'F6': '', 'F1': 'A4', 
		},
		'sulfuric_acid_10': {
			'F4': 'A1', 'F3': 'A1', 'F6': 'N', 'F1': 'A3', 
		},
	}

	window.onload = function() {
		initPara('Fluid');
		initPara('Size');
		initPara('TemperatureUnit');
		initPara('PressureUnit');
	};

	// 获取参数名称
	function getParaName(para, f) {
		var lang = getQueryString('lang')

		if ('name' in PARA[para][f]) {
			return PARA[para][f]['name']
		}
		else {
			if (lang == 'en')
				return PARA[para][f]['name_e']
			else
				return PARA[para][f]['name_c']			
		}
	}

	// 初始化参数
	function initPara(para){
		$("#select" + para).empty();
		// 添加项目

		for(var f in PARA[para]) {
           var option = "<option value=" + f + ">" + getParaName(para, f) + "</option>";
           $("#select" + para).append(option);
		}
		$("#select" + para).siblings('span').html($("#select" + para + " option:first").text());
		$("#select" + para + " option:first").prop("selected", 'selected');

	}

	// 选择电极
	function selectElectrode(fluid, temprature){
		var electrode = {}
		for (const [k, v] of Object.entries(ElectrodeCorrosion[fluid])){
			if (v == 'N')
				continue

			var temprature_limit = 0
			if (v.length == 1)
				temprature_limit = 150
			else if (v.length == 2 && v[1] == '1')
				temprature_limit = 120
			else if (v.length == 2 && v[1] == '2')
				temprature_limit = 100
			else if (v.length == 2 && v[1] == '3')
				temprature_limit = 80
			else if (v.length == 2 && v[1] == '4')
				temprature_limit = 60
			else if (v.length == 2 && v[1] == '5')
				temprature_limit = 20
			else
				raise('电极温度等级错误：' + v)

			if (Object.is(temprature, NaN) || temprature_limit >= temprature)
				electrode[k] = v
		}
		return electrode
	}

	// 选择电极
	function selectLining(fluid, temprature){
		var lining = {}
		for (const [k, v] of Object.entries(LiningCorrosion[fluid])){
			if (v == 'N' || v == '')  // N = 不耐腐蚀，'' = 没有数据
				continue

			var temprature_limit = 0
			if (v.length == 1)
				temprature_limit = 150
			else if (v.length == 2 && v[1] == '1')
				temprature_limit = 120
			else if (v.length == 2 && v[1] == '2')
				temprature_limit = 100
			else if (v.length == 2 && v[1] == '3')
				temprature_limit = 80
			else if (v.length == 2 && v[1] == '4')
				temprature_limit = 60
			else if (v.length == 2 && v[1] == '5')
				temprature_limit = 20
			else
				raise('衬里温度等级错误：' + v)

			if (Object.is(temprature, NaN) || temprature_limit >= temprature)
				lining[k] = v
		}
		return lining
	}



	// 计算
	function calcResult() {
		var message = '' +
		'<h2>输入参数</h2>' +
		'<ul data-role="listview">'

		// 介质
		var fluid = $("#selectFluid").val();
		message += '<li data-role="list-divider">介质：\t' + getParaName('Fluid', fluid) + '</li>\n';

		// 口径
		var size = $("#selectSize").val();
		message += '<li data-role="list-divider">口径：\t' + getParaName('Size', size) + '</li>\n';

		// 温度
		var temprature_min = $("#temprature_min").val();
		var temprature_max = $("#temprature_max").val();
		var temprature_unit = $("#selectTemperatureUnit").val();
		message += '<li data-role="list-divider">温度：\t' + temprature_min + '~' + temprature_max + getParaName('TemperatureUnit', temprature_unit) + '</li>\n';

		// 压力
		var pressure_min = $("#pressure_min").val();
		var pressure_max = $("#pressure_max").val();
		var pressure_unit = $("#selectPressureUnit").val();
		message += '<li data-role="list-divider">压力：\t' + pressure_min + '~' + pressure_max + getParaName('PressureUnit', pressure_unit) + '</li>\n';
		message += '</ul>'


		message += '' +
		'<h2>计算结果</h2>' +
		'<ul data-role="listview">'

		message += '<li data-role="list-divider">电极</li>';
		var temp = selectElectrode(fluid, parseInt(temprature_max))
		for (const [k, v] of Object.entries(temp))
			message += '<li><a href="#">' + Electrode[k]['name_c'] + '：' + v + '</a></li>'

		message += '<li data-role="list-divider">衬里</li>';
		var temp = selectLining(fluid, parseInt(temprature_max))
		for (const [k, v] of Object.entries(temp))
			message += '<li><a href="#">' + Lining[k]['name_c'] + '：' + v + '</a></li>'

		message += '</ul>'

		document.getElementById("message").innerHTML=message;
	}

</script>

<style>
.ui-input{
  float:left;
  width: 100px; 
}
.ui-input>div{
    display: inline-block;
    line-height: 26px;
    height: 26px;
}

.ui-lable{
   float:left;
   line-height:26px; 
   width: 50px; 
}

.ui-lable.ui-lable-left{
   line-height:36px;	
}

.ui-unit{
   float:left;
   line-height:20px; 
}

</style>

</head>
<body>
    <div data-role="page" id="pageone">
		<div data-role="header" data-position="fixed">
			<h1 id="header-device-detail">流量计选型工具</h1>
			<a href="javascript:document.location='./flow.html'" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-back"></a>
		</div>

		<div data-role="main" class="ui-content">
		
		<form action="">
			<div class="ui-grid-a">
				<div class="ui-lable ui-lable-left">
				    <label><b>介质</b></label>
			    </div>
				<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
	                <select id="selectFluid" class="select"></select>
				</fieldset>
			</div>

			<div class="ui-grid-a">
				<div class="ui-lable ui-lable-left">
				    <label><b>口径</b></label>
			    </div>
				<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
	                <select id="selectSize" class="select"></select>
				</fieldset>
			</div>

			<div class="ui-grid-a">
				<div class="ui-lable ui-lable-left"><label><b>温度</b></label></div>

				<div class="ui-lable"><label>从</label></div>
				<div class="ui-input">
				    <input type="text" width="10px" name="temprature_min" id="temprature_min" data-mini="true">
				</div>
				<div class="ui-lable ui-lable-left"><label>......</label></div>
				<div class="ui-input">
				    <input type="text" width="10px" name="temprature_max" id="temprature_max" data-mini="true">
				</div>
				<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
				    <select id="selectTemperatureUnit" class="select"></select>
				</fieldset>
			</div>

			<div class="ui-grid-a">
				<div class="ui-lable ui-lable-left"><label><b>压力</b></label></div>

				<div class="ui-lable"><label>从</label></div>
				<div class="ui-input">
				    <input type="text" width="10px" name="pressure_min" id="pressure_min" data-mini="true">
				</div>
				<div class="ui-lable ui-lable-left"><label>......</label></div>
				<div class="ui-input">
				    <input type="text" width="10px" name="pressure_max" id="pressure_max" data-mini="true">
				</div>
				<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
				    <select id="selectPressureUnit" class="select"></select>
				</fieldset>
			</div>

			<div data-role="main" class="ui-content">
			    <input type="button" value="计算" onclick="calcResult()">
			</div>



		</form>
		<li data-role="fieldcontain">
			<div id="message">
				<!-- <p>* 输入流量值或当量值计算脉冲数</p> -->
			</div>
		</li>
	    </div>
	</div>
</body>
</html>